<template>
  <div class="asideBottom_box">
    <div class="bottom_box_left" @click="goLyrics">
      <img
        :src="
          songMessageDetail.songs ? songMessageDetail.songs[0].al.picUrl : ''
        "
        alt=""
      />
      <div class="singer_message">
        <span>{{
          songMessageDetail.songs ? songMessageDetail.songs[0].name : ""
        }}</span>
        <span>{{ arName() }}</span>
      </div>
    </div>

    <div class="controls_right">这里放两个icon图标</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            index:0,
        }
    },
    computed:{
        ...mapState(['songMessageDetail']),
    },
    methods:{
        arName(){
            let arr = this.songMessageDetail.songs ?this.songMessageDetail.songs[0].ar:[]
            let str = ''
            arr.forEach(item=>str += item.name)
            return str
        },
        // 跳转路由到歌词
        goLyrics(){
            if(this.index!==0){
                this.$router.push({path:'/Lyrics'})
            }else{
                console.log('播放列表没有歌曲')
            }
        }
    },
    mounted(){
        this.$bus.$on('submitIndex',i=>this.index = i)
    }
}
</script>

<style lang="less" scoped>
.asideBottom_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .bottom_box_left {
    display: flex;
    img {
      width: 78px;
      height: 78px;
    }
    .singer_message {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 10px;
      span {
        width: 100px;
        height: 32px;
        overflow: hidden;
        font-size: 10px;
      }
    }
  }
}
</style>